import { ColumnProps } from "@/components/ProTable/interface";
import { genderType, statusEnum } from "@/config/enums/serviceDict";
import { DeptInfo, RoleInfo } from "@/interface/api.ts";

export function user(roles: RoleInfo[], deptTree: DeptInfo[]) {
  const columns: ColumnProps[] = [
    { type: "selection", fixed: "left", width: 80 },
    { type: "index", label: "#", width: 80 },
    // { type: "expand", label: "Expand", width: 100 },
    {
      prop: "avatar",
      label: "头像",
      width: 100
    },
    {
      prop: "username",
      label: "用户名",
      search: { el: "input", props: { placeholder: "请输入用户名", style: "width: 180px;" } }
    },
    {
      prop: "phone",
      label: "手机号",
      width: 150,
      search: { el: "input", props: { placeholder: "请输入手机号", style: "width: 180px;" } }
    },
    {
      prop: "gender",
      label: "性别",
      width: 100,
      enum: genderType,
      search: { el: "select", props: { placeholder: "性别", style: "width: 100px;" } }
    },
    {
      prop: "role_id",
      label: "角色",
      width: 150,
      enum: roles,
      fieldNames: {
        label: "name",
        value: "id"
      },
      search: {
        el: "select",
        props: { placeholder: "请选择角色", style: "width: 150px;" }
      }
    },
    {
      prop: "dept_id",
      label: "所属部门",
      width: 180,
      enum: deptTree,
      fieldNames: {
        label: "name",
        value: "id"
      },
      search: {
        el: "tree-select",
        props: { filterable: true, label: "title", value: "id", checkStrictly: true, placeholder: "所属部门", style: "width:180px;" }
      }
    },
    {
      prop: "status",
      label: "状态",
      width: 100,
      enum: statusEnum,
      search: { el: "select", props: { placeholder: "状态", style: "width: 100px;" } }
    },
    {
      prop: "create_time",
      label: "创建时间",
      width: 180,
      search: {
        el: "date-picker",
        key: "dateTimeRange",
        props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss", clearable: true, style: "width: 240px;" }
      }
    },
    { prop: "operation", label: "操作", fixed: "right", width: 240 }
  ];
  return { columns };
}
